<template>
  <div class="auto-login-container">
    <!-- 处理状态展示 -->
    <div class="processing-state">
      <p>{{ statusText }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import {ElLoading, ElMessage} from 'element-plus';

// API和工具导入
import * as authUtil from '@/utils/auth';
import * as LoginApi from '@/api/login';
import {usePermissionStore} from '@/store/modules/permission';

// 状态定义
defineOptions({name: 'AutoLogin'})

const {push} = useRouter()
usePermissionStore()

// 流程控制
const statusText = ref('正在处理登录信息...')

// 登录数据（简化版，无租户和验证码）
const loginData = {
  loginForm: {
    username: '', // 由回调填充
    security: '', // 登陆的userToken
    password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '123456', // 固定默认密码
  }
}

// 获取所有 Cookie 并解析
const getCookie = (name) => {
  const cookies = document.cookie.split('; ')
  for (const cookie of cookies) {
    const [key, value] = cookie.split('=')
    if (key === name) return decodeURIComponent(value)
  }
  return ''
}

/**
 * 第一步：处理回调，获取账号信息
 */
const handleCallback = async () => {
  try {
    statusText.value = '正在获取登录信息...'
    // 调用后端接口获取回调信息
    // 获取存储的用户名
    const userName = getCookie('Username')
    if (userName) {
      loginData.loginForm.username = userName
      await handleLogin() // 直接调用登录
    } else {
      throw new Error('未获取到有效的登录账号')
    }
  } catch (err) {
    statusText.value = '登录失败，请手动登录'
    console.error('回调处理错误:', err)
    ElMessage.error(`登录失败: ${(err as Error).message}`)

    // 失败时跳转到手动登录页（可选）
    setTimeout(() => {
      push('/AutoLogin')
    }, 3000)
  }
};

/**
 * 第二步：执行自动登录
 */
const handleLogin = async () => {
  try {
    statusText.value = '正在登录系统...'

    // 简单表单验证
    if (!loginData.loginForm.username) {
      throw new Error('登录账号不能为空')
    }

    // 调用登录接口
    const res = await LoginApi.pkiLogin(loginData.loginForm)
    if (!res) {
      throw new Error('登录接口返回异常')
    }

    // 保存登录状态
    authUtil.setToken(res)

    // 登录成功，加载系统并跳转
    const loadingInstance = ElLoading.service({
      lock: true,
      text: '登录成功，正在进入系统...',
      background: 'rgba(0, 0, 0, 0.7)'
    })

    // 跳转到首页
    setTimeout(async () => {
      await push('/')
      loadingInstance.close()
    }, 1000)

  } catch (err) {
    statusText.value = '登录失败，请手动登录'
    console.error('登录错误:', err)
    ElMessage.error(`登录失败: ${(err as Error).message}`)

    // 失败时跳转到手动登录页
    setTimeout(() => {
      push('/login')
    }, 3000)
  }
}

// 页面加载时立即启动自动登录流程
onMounted(() => {
  handleCallback()
})
</script>

<style lang="scss" scoped>d
.auto-login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  padding: 20px;
}

.processing-state {
  text-align: center;
  padding: 40px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.processing-state p {
  margin-top: 20px;
  font-size: 16px;
  color: #606266;
}
</style>
